<template>
    <div class="dataAssets">
        <div class="flex flex-justify-center flex-center">
            <div style="padding-top: 10px;">
                <el-button type="text" @click="handerOpen" size="small" style="margin-right: 20px;">高级搜索</el-button>
            </div>
            <div class="search">
                <el-input size="small" @blur="opacity = 0" @focus="opacity = 1" placeholder="请输入内容" v-model="queryParams.dbName"
                    class="input-with-select">
                    <el-button slot="append" @click="handerSearch" icon="el-icon-search"></el-button>
                </el-input>
                <div class="history-list" :style="{ '--opacity': opacity, 'zIndex': opacity == 0 ? '0' : '1000' }">
                    <div class="history-left">
                        <div class="search-history">
                            搜索历史
                        </div>
                        <div class="flex flex-wrap btn-layout">
                            <el-button v-for="item in 10" :key="item" size="mini" round>{{ item < 3 ? '按钮按钮' : '按钮'
                                    }}</el-button>
                        </div>
                    </div>
                    <div class="history-right">
                        <div class="search-history">
                            搜索热词
                        </div>
                        <ul class="hotWords">
                            <li class="flex flex-space-between flex-center" v-for="item in 5 " :key="item">
                                <div class="hotWords-title flex flex-center" :class="`top${item}`">
                                    <i>{{ item }}</i>
                                    <span>线损</span>
                                </div>
                                <p class="hotWord-num flex flex-center" :style="{ color: item < 4 ? '#333' : '#989898' }">
                                    <img v-if="item < 4" src="../assets/images/hot.png" alt="">
                                    20182
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex" style="z-index: 20;position: relative;">
            <div class="left" :style="{ width: sideWidth }">
                <el-card :body-style="{
                    padding: '10px 20px'
                }">
                    <div class="flex">
                        <div class="tree-box flex-stretch" v-loading="treeLoading">
                            <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
                                <span class="custom-tree-node" slot-scope="{data }">
                                    <i class="el-icon-folder" />
                                    {{ data.title }}
                                </span>

                                。
                            </el-tree>
                        </div>
                        <div class="senior-search flex-stretch">
                            <h4 class="flex flex-space-between flex-center">
                                筛选条件
                                <el-button size="mini" type="text" @click="handerPut">
                                    << 收起</el-button>
                            </h4>
                            <h3 style="padding-top: 20px;">负面清单类型</h3>
                            <div style="padding: 20px 0;">
                                <el-radio-group v-model="queryParams.nagatType">
                                    <el-radio label="非负面清单">非负面清单</el-radio>
                                    <el-radio label="表负面清单">表负面清单</el-radio>
                                    <el-radio label="字段负面清单">字段负面清单</el-radio>
                                </el-radio-group>
                            </div>
                            <h3>应用主题</h3>
                            <div style="padding: 20px 0;">
                                <el-checkbox-group v-model="queryParams.applyTheme">
                                    <el-checkbox label="主题1">主题1</el-checkbox>
                                    <el-checkbox label="主题2">主题2</el-checkbox>
                                    <el-checkbox label="主题3">主题3</el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <h3>业务场景</h3>
                            <div style="padding: 20px 0;">
                                <el-checkbox-group v-model="queryParams.busiScen">
                                    <el-checkbox label="场景1"></el-checkbox>
                                    <el-checkbox label="场景2"></el-checkbox>
                                    <el-checkbox label="场景3"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <h3>是否权威数据</h3>
                            <div style="padding: 20px 0;">
                                <el-radio-group v-model="queryParams.powerFlag">
                                    <el-radio label="是">是</el-radio>
                                    <el-radio label="否">否</el-radio>
                                </el-radio-group>
                            </div>

                            <h3>是否主数据</h3>
                            <div style="padding: 20px 0;">
                                <el-radio-group v-model="queryParams.mainFlag">
                                    <el-radio label="是">是</el-radio>
                                    <el-radio label="否">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div style="text-align:right">
                                <el-button size="mini" @click="handerSearch" type="primary">筛选</el-button>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="right dataAssets-table flex-stretch">
                <div class="header-data flex flex-space-between flex-center">
                    <p>数据表（{{total}}）</p>
                    <div class="search-term flex">
                        <span style="margin-right: 5px;">更新时间<i class="el-icon-d-caret"></i></span>
                        <span style="margin-right: 20px;">申请次数</span>
                        <span style="margin-right: 5px;">访问次数<i class="el-icon-d-caret"></i> </span>
                        <span>热门数据</span>
                    </div>
                </div>
                <div class="data-list" v-loading="listLoading">
                    <div class="data-item" v-for="item in listData" :key="item.id">
                        <div class="a-title">
                            <p class="a-title-name" @click="goToDataDetail">
                                {{ item.dbName }}<span>({{item.dbCode}})</span>
                                <i>数据中台>共享层</i>
                            </p>
                        </div>
                        <div class="data-item-content">
                            <div class="data-pdd data-item-type">
                                <span>{{item.nagatType}}</span>
                                <span>发布时间：<i>{{item.createTime}}</i></span>
                                <span>表最后更新时间：<i>{{item.updateTime}}</i></span>
                            </div>
                            <div class="describe">
                                表描述：<span class="text-color text-size"
                                    style="line-height: 1.7;">{{item.remark}}</span>
                            </div>
                            <div class="text-size" style="margin-top: 20px;">
                                字段数量：<span style="color: #006569;font-weight: 700;">{{item.fieldNum}}</span>
                            </div>
                            <div class="data-field" style="margin-top: 20px;">
                                <span v-for="item in 8" :key="item">测试测试测试{{ item }}</span>
                                <span @click="seeAllfidel">全部>> </span>
                            </div>
                            <div class="data-btn">
                                <el-button size="small" icon="el-icon-plus" :disabled="item.collecFlag" type="primary">加入购物车</el-button>
                                <el-button size="small" icon="el-icon-star-on" :disabled="item.carFlag" type="primary">收藏</el-button>
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="data-page">
                        <el-pagination :page-size="queryParams.limit" :current-page.sync="queryParams.skip" layout="prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我的购物车 -->
        <div class="shopping-cart" @click="goShoppingCart('shopping')">
            我的购物车
        </div>
        <div class="shopping-cart shopping-collect" @click="goShoppingCart">
            我的收藏
        </div>
        <el-dialog title="字段量详情" top="4vh" :visible.sync="dialogVisible" width="600px">
            <div class="field-all">
                <el-button v-for="item in 45" :key="item" size="mini" round>超小按钮</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { loadTreeRootML, mlGetBiao } from "../serve/api";
export default {
    name: 'dataAssets',
    data() {
        return {
            dialogVisible: false,
            treeLoading: true,
            listLoading: true,
            opacity: 0,
            checkbox: [],
            treeData: [],
            defaultProps: {
                children: "children",
                label: "title",
            },
            isShow: true,
            isHot: false,
            sideWidth: '400px',
            // list
            listData: [],
            queryParams: {
                nagatType: '',
                applyTheme: [],
                busiScen: [],
                powerFlag: '',
                mainFlag: '',
                categoryId: '',
                dbName: '',
                assoStatus: '',
                skip: 1,
                limit: 10
            },
            total: 0
        }
    },
    methods: {
        getTreeData() {
            this.treeLoading = true;
            loadTreeRootML({ async: false, pcode: "", title: "" }).then((res) => {
                console.log(res);
                this.treeData = res.data;
                this.options = res.data;
                this.treeLoading = false;
            })
                .catch(err => {
                    this.treeLoading = false;
                });
        },

        async getListData() {
            this.listLoading = true;
            try {
                const res = await mlGetBiao(this.queryParams)
                this.listData = res.data;
                this.total = res.count;
                this.listLoading = false;
            } catch (error) {
                this.listLoading = false;
            }
        },
        handleNodeClick(data) {
            this.queryParams.categoryId = data.key;
            this.getListData();
        },
        goToDataDetail() {
            this.$router.push({
                path: '/dataAssetsDetail',
                query: {
                    id: 1
                }
            })
        },
        handerPut() {
            this.isShow = false;
            this.sideWidth = 0
        },
        handerOpen() {
            this.isShow = true;
            this.sideWidth = '400px'
        },
        seeAllfidel() {
            this.dialogVisible = true
        },
        goShoppingCart(type) {
            if (type == 'shopping') {
                this.$router.push({
                    path: '/shoppingCart'
                })
            } else {
                this.$router.push({
                    path: '/myCollect'
                })
            }
        },
        handleCurrentChange(num) {
            this.queryParams.skip = num
            this.getListData()
        },
        handerSearch() {
            this.getListData()
        }
    },
    mounted() {
        this.getTreeData()
        this.getListData()
    }
}
</script>
<style lang="less" scoped>
.dataAssets {

    // background: #f5f5f5;
    .left {
        width: 400px;
        transition: all 0.3s ease-in-out;
        margin-right: 15px;
        flex-shrink: 0;
    }

    /deep/.el-input-group__append {
        background-color: #006569;
    }

    /deep/.el-icon-search {
        color: #fff;
    }

    /deep/.el-input__inner {
        border-color: #006569;
    }

    // padding: 0 20px;
    padding-right: 40px;

    .a-title-name {
        cursor: pointer;
    }

    .data-item {
        border: 1px solid #DFE2E8;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 15px;
        background: #fff;
    }

    .search {
        padding: 20px 0 10px 0;
        width: 600px;
        position: relative;
    }

    .a-search {
        padding-top: 20px;
    }

    .a-title {
        position: relative;
        color: #006569;
        font-size: 18px;
        font-weight: bold;
        padding-left: 15px;

        span {
            font-size: 16px;
        }

        &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: #006569;
        }

        i {
            font-style: normal;
            font-size: 12px;
            color: #000;
            margin-left: 5px;
        }
    }
}

.text-color {
    color: #333;
}

.text-size {
    font-size: 14px;
}

.data-item-content {
    padding: 0 15px;

    .data-pdd {
        padding: 15px 0;
    }

    .data-item-type {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #989898;

        span {
            margin-right: 20px;
        }

        i {
            color: #000;
            font-style: normal;
        }
    }

    .describe,
    .data-time,
    .data-field {
        font-size: 14px;
        color: #989898;

    }

    .data-field {
        display: flex;

        span {
            padding: 3px 10px;
            border: 1px solid #DFE2E8;
            margin-right: 10px;
            margin-bottom: 10px;
            max-width: fit-content;
            color: #000;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;

            &:last-child {
                cursor: pointer;
            }
        }
    }

    .data-btn {
        display: flex;
        justify-content: flex-end;
    }
}

.data-page {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
}

.openSide {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.header-data {
    padding: 10px 20px 10px 50px;
    font-size: 20px;
    color: #006569;
    font-weight: 800;
    background: #fff;
    margin-bottom: 10px;
}

.search-term {
    font-size: 14px;
    color: #989898;
    font-weight: 500;
    cursor: pointer;
}

.history-list {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    height: 230px;
    border: 1px solid #DFE2E8;
    border-radius: 3px;
    display: grid;
    grid-template-columns: 1fr .8fr;
    padding: 20px;
    box-sizing: border-box;
    opacity: var(--opacity);
    transition: all 0.3s ease-in-out;

    .history-left {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 1px;
            height: 100%;
            background: #DFE2E8;
        }
    }

    .history-right {
        padding-left: 20px;

        .hotWords {
            padding-top: 20px;

            li {
                padding: 5px 0;
            }
        }

        .hotWords-title {
            font-size: 14px;
            color: #989898;

            i {
                font-style: normal;
                margin-right: 10px;
                font-weight: bold;
            }
        }

        .hotWord-num {
            font-size: 14px;
            color: #989898;

            img {
                width: 15px;
                height: 15px;
                margin-right: 5px;
                position: relative;
                top: -2px;
            }
        }
    }
}

.search-history {
    position: relative;
    color: #006569;
    font-size: 14px;
    padding-left: 10px;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 15px;
        background: #006569;
    }
}

.btn-layout {
    padding-top: 20px;

    /deep/.el-button {
        margin-left: 0;
        margin-right: 16px;
        margin-bottom: 10px;
    }
}

// top3 color
.top1 {
    i {
        color: #ff6161;
    }

    span {
        color: #000;
    }
}

.top2 {
    i {
        color: #ff9f53;
    }

    span {
        color: #000;
    }
}

.top3 {
    i {
        color: #ffd959;
    }

    span {
        color: #000;
    }
}

.field-all {
    display: flex;
    justify-content: flex;
    flex-wrap: wrap;

    /deep/.el-button {
        margin-left: 0;
        margin-bottom: 10px;
        margin-right: 10px;
    }
}

/deep/.el-input-group__append {
    border: 0;
}

/deep/.el-radio {
    margin-bottom: 10px;
}

.tree-box {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background: #DFE2E8;
    }
}

.senior-search {
    padding-left: 20px;
}
</style>